.po-r {
  position: relative;
}

.po-a {
  position: absolute;
}

.po-f {
  position: fixed;
}

// top
@for $i from 1 through 60 {
  .t-#{5 * $i} {
    top: 5px * $i;
  }
}

// top negative
@for $i from 1 through 60 {
  .t-negative-#{5 * $i} {
    top: -5px * $i;
  }
}

// right
@for $i from 0 through 60 {
  .r-#{5 * $i} {
    right: 5px * $i;
  }
}

// bottom
@for $i from 0 through 60 {
  .b-#{5 * $i} {
    bottom: 5px * $i;
  }
}

// left
@for $i from 0 through 60 {
  .l-#{5 * $i} {
    left: 5px * $i;
  }
}

// top percent
.t-percent-50 {
  top: 50%
}

// right percent
.r-percent-50 {
  right: 50%
}

// bottom percent
.b-percent-50 {
  bottom: 50%
}

// left percent
.l-percent-50 {
  left: 50%
}

// z-index 5-300
@for $i from 1 through 60 {
  .z-index-#{5 * $i} {
    z-index: 5 * $i;
  }
}
